<template>
  <div class="add-list">
    <head-nav :cname="titleName"></head-nav>
    <search-l>
      <template>
        <div>
          <el-form
            :inline="true"
            :model="searchFrom"
            class="demo-form-inline m-lh"
          >
            <el-form-item label="广告名称:">
              <el-input
                v-model="searchFrom.user"
                placeholder="广告名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="广告位置:">
              <el-select v-model="searchFrom.region" placeholder="全部">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="到期时间:">
              <el-select v-model="searchFrom.region" placeholder="全部">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </search-l>
    <data-list>
      <template>
        <div>
          <span class="add-activity" onselectstart="return false" @click="addHD"
            >添加活动</span
          >
          <select disabled name="xsts" id="xsts-list">
            <option value="xsts">显示条数</option>
          </select>
          <select disabled name="pxfs" id="xsts-list">
            <option value="pxfs">排序方式</option>
          </select>
        </div>
      </template>
    </data-list>
    <el-table class="table-c" :data="advList" border>
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="编号" width="50"> </el-table-column>
      <el-table-column prop="title" label="广告名称" width="100">
      </el-table-column>
      <el-table-column prop="place" label="广告位置" width="100">
      </el-table-column>
      <el-table-column prop="adimg" label="广告图片" width="100">
      </el-table-column>
      <el-table-column prop="times" label="时间" width="180"> </el-table-column>
      <el-table-column label="上线/下线" width="100">
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->
          <el-switch v-model="scope.row.boolean" @change="changtTab(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="count" label="点击次数" width="100">
      </el-table-column>
      <el-table-column prop="order" label="生成订单" width="100">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a href="javascript:;" @click="editCt(scope.row)">编辑</a>
          <a href="javascript:;" class="edit-content" @click="setTop(scope.row)"
            >置顶</a
          >
          <a href="javascript:;" @click="del(scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      advList: [],
      searchFrom: {
        name: '',
        region: ''
      },
      titleName: this.$route.query.name
    }
  },
  methods: {
    del() {
      console.log('删除')
    },
    //   置顶
    setTop() {
      console.log('置顶')
    },
    editCt() {
      console.log('编辑')
    },
    //   添加活动
    addHD() {
      console.log('添加活动')
    },
    //   提交查询
    onSubmit() {
      console.log('提交')
    }
  }
}
</script>

<style lang="less" scope>
.table-c {
  text-align: center;
}
.add-activity {
  cursor: pointer;
  padding: 10px;
  border: 1px solid rgba(228, 228, 228, 1);
  margin: 0 5px;
  background: #fff;
}
.m-lh {
  margin-left: 20px;
}
</style>
